<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title></title>
  <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <div>
      <bro></bro>
      <girl></girl>
    </div>
  </div>
  <script type='text/javascript'>
    // 新建公共 数据仓库
    let eventBus  = new Vue();

    Vue.component('bro', {
      data(){
        return {
          msg1: '兄弟元素送来的祝福',
          msg2: ''
        }
      },
      template: `
        <div>
            <div>我是兄弟元素 ======= {{ msg2 }}</div>
            <button @click="setBro">点击发送给girl元素</button>
        </div>
      `,
      methods: {
        setBro(){
          eventBus.$emit('setInfo1', this.msg1);
        }
      },
      mounted() {
        eventBus.$on('setInfo2', val=>{
          console.log(val);
          this.msg2 = val;
        })
      }
    });

    Vue.component('girl', {
      data(){
        return {
          msg1: '',
          msg2: '姐妹元素送来的祝福'
        }
      },
      template: `
        <div>
          <div>我是姐妹元素 ======= {{ msg1 }}</div>
          <button @click="setGirl">点击发送给bro元素</button>           
        </div>
      `,
      methods: {
        setGirl(){
          eventBus.$emit('setInfo2', this.msg2)
        }
      },
      mounted() {
        eventBus.$on('setInfo1', val=>{
          console.log(val);
          this.msg1 = val;
        })
      },
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        
      }
    });
  </script>
</body>
</html>